<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
	 <meta charset="utf-8">
	 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	 <title th:replace="common/base::pagetitle"></title>
	 <link th:replace="common/base::static"/>
	 <link rel='stylesheet' th:href="@{/static/css/element.ui.2.13.2.index.css}">
</head>
<body style="background-color: #f2f2f2;">

<div id="kPage" class="layui-fluid" style="padding: 0">
	 
	 <div class="layui-row wlb-fluid-padding15">
		  
		  <div class="layui-col-md12" >
				<div class="layui-card" style="z-index:-101">
<!--					 <div class="layui-card-header">流程图</div>-->
<!--					 1 ——> 2 ——> 3 ——> 4-->
					 <div class="layui-card-body">
						  <div class="layui-form" lay-filter="">
<!--								<div class="layui-form-item" style="width:100%; position:fixed;z-index: 98; top:0; left: 0;right: 0;margin:0 auto">-->
<!--									 <div  id="nodeMain" style="width: 100%; height: 100%;position: absolute; z-index: 99;">-->
<!--									 </div>-->
<!--								</div>-->
<!--								<div class="layui-form-item">-->
<!--									 <hr />-->
<!--								</div>-->
								<!-- 渲染json schema模板 -->
								<div id="voucherList">
									 <vue-form
												v-model="formData"
												:ui-schema="uiSchema"
												:schema="schema"
									 >
										  <div slot-scope="{ formData, formRefFn }">
										  </div>
									 </vue-form>
								</div>
								<div class="layui-form-item layui-hide">
									 <input type="button" lay-submit="" lay-filter="kFormSubmit" id="kFormSubmit" value="确认添加">
									 <input type="text" id="id" name="id" th:value="${id}" placeholder="保存ID" autocomplete="off" class="layui-input">
									 <input type="text" id="templateId" name="templateId" th:value="${templateId}" placeholder="保存ID" autocomplete="off" class="layui-input">
<!--									 <input type="text" id="key" name="key" th:value="${key}" placeholder="保存ID" autocomplete="off" class="layui-input">-->
<!--									 <input type="text" id="bankId" name="bankId" th:value="${bankId}"  placeholder="保存ID" autocomplete="off" class="layui-input">-->
<!--									 <input type="text" id="templateId" name="templateId" th:value="${templateId}" placeholder="保存ID" autocomplete="off" class="layui-input">-->
									 <input type="text" id="dataUrl" name="dataUrl" th:value="${dataUrl}" placeholder="保存ID" autocomplete="off" class="layui-input">
									 <input type="text" id="contractNo" name="contractNo" placeholder="保存ID" autocomplete="off" class="layui-input">
								</div>
						  </div>
					 </div>
				</div>
		  </div>
	 </div>
</div>

<script th:replace="common/base::context"></script>
<script th:replace="common/base::mainjs"></script>
<script th:src="@{/static/js/schema/polyfill.umd.min.0.0.1.js}"></script>
<script th:src="@{/static/js/schema/vue.2.6.12.js}"></script>
<script th:src="@{/static/js/schema/element.ui.index.2.13.2.js}"></script>
<script th:src="@{/static/js/schema/vueJsonSchemaForm.umd.1.2.0.min.js}"></script>
<script th:src="@{/static/js/schema/axios.0.18.0.min.js}"></script>

<script type="text/javascript" th:inline="javascript">
        //初始化
    initSchema();

    /**
	  * 初始化模板数据
     * @param contractNo
     * @param dataType
     * @returns {{schema: {}, formProps: {}, btype: string, uiSchema: {}, businessId: string, formData: {}, formFooter: {}}}
     */
    function initSchema(){
        // vue实例
        var vm = new Vue({
            // 实例名
            el: '#voucherList',
            // 定义数据字段
            data(){
                return {
                    // json 模板
                    schema: {

                    },
                    // 表单布局
                    formFooter: {

                    },
                    // 表单属性
                    formProps: {

                    },
                    // 表单ui
                    uiSchema: {

                    },

                    // 表单数据
                    formData: {

                    },

                    btype:"",           // 模板名称
                    businessId:"",      // 业务id
                }
            },
            // 初始化钩子
            mounted() {
                // this.mychart();
                // this.queryTemplateBtype();
                // this.queryTemplateDataByBusinessId();
					 //加载模板
                this.initData();
            },
            methods: {
                // 拿到模板数据
                initData(){
                    var vue = this;
                    // let btype = document.getElementById("btype");
                    // vue.btype = btype.value;
                    var p = axios.get(BASE_WEB + "data/schemaById",{params:{templateId:$("#templateId").val()}})
                    p.then(function (result) {
                        if (result.data.code === 200) {
                            vue.schema = {};
                            vue.formFooter = {};
                            vue.formProps = {};
                            vue.uiSchema = {};
                            if(result.data.data.schema){
                                vue.schema = result.data.data.schema;
                            }
                            if(result.data.data.formFooter){
                                vue.formFooter = result.data.data.formFooter;
                            }
                            if(result.data.data.formProps){
                                vue.formProps = result.data.data.formProps;
                            }
                            // if(result.data.data.uiSchema){
                            //     vue.uiSchema = result.data.data.uiSchema;
                            // }
                            vue.queryData();
                        } else {
                            vue.schema = {};
                        }
                    }).catch(function (error) {
                        console.log(error)
                    })
                },
					queryData(){
                   var vue = this;
                   var p = axios.get(BASE_WEB + $("#dataUrl").val(),{})
                   p.then(function (result) {
                       vue.formData = {};
                       console.log(result.data.data.jsonData);
                       if(result.data.code === 200){
                           vue.formData = result.data.data.jsonData;
                           vue.uiSchema = result.data.data.uiSchema;
                       }else{
                           vue.formData = {};
                       }
                   }).catch(function (error) {

                   })
					},

                consoleLog(consoleLog){
                    console.log(consoleLog)
                }
            }
        });
	 }

</script>

</body>
</html>